import React, { createRef, useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
    Image,
} from 'antd';
import { connect } from 'react-redux'
import request, { baseUrl } from '@/utils/request'
import { withNavigate } from '../../../utils/hoc';

class Add extends React.PureComponent {
    state = {
        goods: {
            category:'男士表',
            online:true
        },
        category: [],

        // 用于存放商品商品文件列表
        fileList:[]
    }

    // 添加商品
    submit = async (values) => {
        const {user,navigate} = this.props;
        const {fileList} = this.state;
        const {data} = await request.post('/goods',values)
        console.log('data',data)
        if(data.code === 200){
            // 添加成功后得到商品id，接着上传商品图片

            const formData = new FormData()
            formData.set('goodsid',data.data[0])
            formData.set('userid',user._id)

            // 遍历文件列表
            fileList.forEach(item=>{
                formData.append('goods',item)
            })

            console.log('formData',formData)
            
            const {data:uploadData} = await request.post('/upload/goods',formData)
            if(uploadData.code === 200){
                message.success('商品添加成功')

                navigate('/manage/goods/list')
            }
        }
    }

    // 图片上传
    uploadGoodsImage = ()=>{
        const {user} = this.props
        // request.post('/upload/goods',{
        //     userid:user._id,
        //     goodsid
        // })
    }
    beforeUpload = (file)=>{
        this.setState({
            fileList:[...this.state.fileList,file]
        })
    }
    UNSAFE_componentWillMount(){
        this.rules = {
            goods_name:[{
                required:true,
                message:'请填写商品名称'
            }]
        }
    }
    componentDidMount() {
        this.myform = createRef()
        

        request.get('/category').then(({ data }) => {
            this.setState({
                category: data.data.result
            })
        })
    }
    render() {
        const { myform, rules, submit, uploadGoodsImage,beforeUpload } = this;
        const { goods,category,fileList  } = this.state;
        const { user } = this.props

        return (
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={goods}
                onFinish={submit}
            >
                <Form.Item label="商品名称" name="goods_name" rules={rules.goods_name}>
                    <Input />
                </Form.Item>
                <Form.Item label="商品分类" name='category'>
                    <Select>
                        {
                            category.map(item => (

                                <Select.Option key={item._id} value={item.text}>{item.text}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>

                {/* <Form.Item label="DatePicker">
                    <DatePicker />
                </Form.Item> */}
                <Form.Item label="价格" name='sales_price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="商品描述">
                    <Input.TextArea rows={4} />
                </Form.Item>
                <Form.Item label="是否上架" name='online' valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item label="商品图片" valuePropName="fileList">
                    <Upload customRequest={uploadGoodsImage} listType="picture-card"  beforeUpload={beforeUpload} fileList={fileList}>
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>添加</Button>
                </Form.Item>
            </Form>
        )
    }
}

const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}
Add = connect(mapStateToProps)(Add)

Add = withNavigate(Add)

export default Add;